<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>编辑个人简介</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }
        
        body {
            max-width: 750px;
            margin: 0 auto;
            color: #333;
            background-color: #f5f5f5;
            padding-bottom: 80px;
        }
        
        .header {
            background-color: #2196F3;
            color: white;
            padding: 15px;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            position: relative;
        }
        
        .back-btn {
            position: absolute;
            left: 15px;
            top: 15px;
            font-size: 16px;
        }
        
        .profile-section {
            background-color: white;
            margin: 15px;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        
        .section-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #2196F3;
            display: flex;
            align-items: center;
        }
        
        .section-title i {
            margin-right: 8px;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
            color: #666;
        }
        
        .form-input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .form-textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            min-height: 100px;
            resize: vertical;
        }
        
        .avatar-upload {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .avatar-preview {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 15px;
            border: 2px solid #eee;
        }
        
        .upload-btn {
            background-color: #f0f0f0;
            color: #666;
            border: none;
            border-radius: 4px;
            padding: 8px 12px;
            font-size: 14px;
            cursor: pointer;
        }
        
        .skill-container {
            display: flex;
            margin-bottom: 15px;
        }
        
        .skill-input {
            flex: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px 0 0 4px;
            font-size: 14px;
        }
        
        .add-skill-btn {
            background-color: #2196F3;
            color: white;
            border: none;
            border-radius: 0 4px 4px 0;
            padding: 0 15px;
            cursor: pointer;
        }
        
        .skill-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .skill-tag {
            display: inline-flex;
            align-items: center;
            background-color: #e3f2fd;
            color: #2196F3;
            padding: 5px 10px;
            border-radius: 15px;
            font-size: 13px;
        }
        
        .remove-tag {
            margin-left: 5px;
            cursor: pointer;
            color: #f44336;
        }
        
        .service-options {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }
        
        .service-option {
            display: flex;
            align-items: center;
        }
        
        .service-checkbox {
            margin-right: 8px;
        }
        
        .save-container {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            max-width: 750px;
            margin: 0 auto;
            padding: 15px;
            background-color: white;
            box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
        }
        
        .save-btn {
            width: 100%;
            background-color: #2196F3;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 12px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
        }
        
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="back-btn" onclick="history.back()">←</div>
        编辑个人简介
    </div>
    
    <div class="profile-section">
        <div class="section-title">
            <i>👤</i> 基本信息
        </div>
        
        <div class="avatar-upload">
            <img src="https://via.placeholder.com/80/2196F3/FFFFFF?text=头像" class="avatar-preview" id="avatar-preview">
            <button class="upload-btn" onclick="document.getElementById('avatar-input').click()">更换头像</button>
            <input type="file" id="avatar-input" accept="image/*" class="hidden" onchange="previewAvatar(this)">
        </div>
        
        <div class="form-group">
            <label class="form-label">昵称</label>
            <input type="text" class="form-input" id="nickname" placeholder="请输入您的昵称" value="张三">
        </div>
        
        <div class="form-group">
            <label class="form-label">个人简介</label>
            <textarea class="form-textarea" id="bio" placeholder="介绍一下你自己...">前端开发工程师，5年开发经验，擅长Vue和React</textarea>
        </div>
    </div>
    
    <div class="profile-section">
        <div class="section-title">
            <i>🛠️</i> 技能掌握
        </div>
        
        <div class="form-group">
            <div class="skill-container">
                <input type="text" class="skill-input" id="new-skill" placeholder="输入技能后点击添加">
                <button class="add-skill-btn" onclick="addSkill()">添加</button>
            </div>
            <div class="skill-tags" id="skills-container">
                <span class="skill-tag">HTML5 <span class="remove-tag" onclick="removeSkill(this)">×</span></span>
                <span class="skill-tag">CSS3 <span class="remove-tag" onclick="removeSkill(this)">×</span></span>
                <span class="skill-tag">JavaScript <span class="remove-tag" onclick="removeSkill(this)">×</span></span>
            </div>
        </div>
    </div>
    
    <div class="profile-section">
        <div class="section-title">
            <i>💼</i> 服务范围
        </div>
        
        <div class="service-options">
            <label class="service-option">
                <input type="checkbox" class="service-checkbox" checked> 前端开发
            </label>
            <label class="service-option">
                <input type="checkbox" class="service-checkbox" checked> 网站建设
            </label>
            <label class="service-option">
                <input type="checkbox" class="service-checkbox"> 技术咨询
            </label>
            <label class="service-option">
                <input type="checkbox" class="service-checkbox"> UI设计
            </label>
            <label class="service-option">
                <input type="checkbox" class="service-checkbox"> 后端开发
            </label>
            <label class="service-option">
                <input type="checkbox" class="service-checkbox"> 移动端开发
            </label>
        </div>
    </div>
    
    <div class="save-container">
        <button class="save-btn" onclick="saveProfile()">保存个人资料</button>
    </div>
    
    <script>
        // 预览头像
        function previewAvatar(input) {
            const file = input.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('avatar-preview').src = e.target.result;
                }
                reader.readAsDataURL(file);
            }
        }
        
        // 添加技能标签
        function addSkill() {
            const input = document.getElementById('new-skill');
            const skillName = input.value.trim();
            
            if (skillName) {
                const container = document.getElementById('skills-container');
                const newTag = document.createElement('span');
                newTag.className = 'skill-tag';
                newTag.innerHTML = `${skillName} <span class="remove-tag" onclick="removeSkill(this)">×</span>`;
                
                container.appendChild(newTag);
                input.value = '';
            }
        }
        
        // 按Enter键也可以添加技能
        document.getElementById('new-skill').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                addSkill();
            }
        });
        
        // 移除技能标签
        function removeSkill(element) {
            element.parentElement.remove();
        }
        
        // 保存个人资料
        function saveProfile() {
            // 收集表单数据
            const profileData = {
                avatar: document.getElementById('avatar-input').files[0] || null,
                nickname: document.getElementById('nickname').value,
                bio: document.getElementById('bio').value,
                skills: [],
                services: []
            };
            
            // 收集技能标签
            const skillTags = document.querySelectorAll('.skill-tag');
            skillTags.forEach(tag => {
                profileData.skills.push(tag.textContent.replace('×', '').trim());
            });
            
            // 收集服务选项
            const serviceCheckboxes = document.querySelectorAll('.service-checkbox');
            serviceCheckboxes.forEach(checkbox => {
                if (checkbox.checked) {
                    profileData.services.push(checkbox.parentElement.textContent.trim());
                }
            });
            
            // 这里可以添加实际的保存逻辑
            console.log('个人资料数据:', profileData);
            alert('个人资料已保存');
            
            // 实际项目中可以取消下面的注释，使用fetch API提交数据
            /*
            const formData = new FormData();
            if (profileData.avatar) formData.append('avatar', profileData.avatar);
            formData.append('nickname', profileData.nickname);
            formData.append('bio', profileData.bio);
            formData.append('skills', JSON.stringify(profileData.skills));
            formData.append('services', JSON.stringify(profileData.services));
            
            fetch('/api/profile', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                alert('个人资料保存成功');
                window.location.href = '/profile';
            })
            .catch(error => {
                console.error('Error:', error);
                alert('保存失败，请重试');
            });
            */
        }
    </script>
</body>
</html>